<!-- 准备渲染echarts的画布 -->
<template>
  <div>
    <div class="china-map" id="map"></div>
  </div>
</template>

<script>
/* eslint-disable */
// 引入echarts依赖
import * as echarts from "echarts";
// 导入中国地图JSON数据
import mapJson from "./area.json";

export default {
  mounted() {
    // 省略前置逻辑
    // 从后端接口获取要渲染的数据列表 name-对应省份 value-对应数据量
    const data = [
      { name: "华东区域", value: 0 },
      { name: "华北区域", value: 999 },
      { name: "华西区域", value: 7777 },
      { name: "华南区域", value: 100000 },
    ];
    // 获取数据列表的最大值
    const maxValue = 100000;
    // 调用渲染函数 渲染地图数据
    this.showMap(data, maxValue);
  },
  methods: {
    // 渲染地图函数（最大值参数可不传递，默认为10000）
    showMap(dataList, maxValue = 10000) {
      // 判断是否已经存在实例 避免重复注册
      let myChart = echarts.getInstanceByDom(document.getElementById("map"));

      if (!myChart) {
        myChart = echarts.init(document.getElementById("map"));
        myChart.on("click", function (e) {
          console.log("click", e);
        });
      }
      // 注册地图
      echarts.registerMap("china", mapJson);
      var option;
      option = {
        // legend: {
        //   data: "华北地区",
        //   show: true,
        //   position: "right",
        // },
        legend: {
          data: ["系列1", "系列2", "系列3"], // 定义图例名称
          show: true,
        },
        // 提示框组件
        tooltip: {
          trigger: "item", // 触发类型-数据项图形hover触发
          formatter: "{b}：{c}人", // hover提示框展示的内容
        },
        // 视觉映射组件
        visualMap: {
          orient: "horizontal", // 显示方式-水平
          left: "center", // 距离容器左侧的位置-居中
          min: 0, // 数据最小值
          max: maxValue, // 指定数据最大值
          itemHeight: 200, // 组件高度-200px(设置显示方式为水平之后，组件高度即为宽度)
          inRange: {
            color: ["#c2e9ff", "#2662a9"], // 范围颜色-从小到大渐变颜色区间
          },
          hoverLink: false, // 是否启用数据项图形hover时的联动高亮效果。
          // text: ["高", "低"], // 组件两侧的文本
        },
        series: [
          {
            name: "中国", // 地图名称
            type: "map", // 系列类型-地图
            map: "china", // 地图类型-与registerMap注册地图的名字相同
            roam: false, // 是否开启鼠标缩放和平移漫游
            zoom: 1.08, // 当前视角的缩放比例
            select: {
              disabled: true, // 数据项图形是否能被选中
            },
            label: {
              show: true, // 是否在数据图形上展示省份名称
            },
            data: dataList, // 渲染的数据列表
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>

<style>
.china-map {
  height: 476px; /* 必须指定画布的高度 否则无法渲染 */
}
</style>
